<template>
  <div id="hotel">
    <div class="cityWarp">
    	<div class="dept">
    		<p class="tag">入住城市</p>
    		<FlightCityInput v-model="query.inCity"/> 
    	</div>
    	
    	<div class="arr">
    		<p class="tag">关键字</p>
    		<el-input size="small"></el-input>
    	</div>
    </div>
    <div class="dateWarp">
    	<div>
    		<p class="tag">住店日期</p>
    		<el-date-picker	      
		      type="date"
		      class="date"
		      size="small"
		      placeholder="选择日期">
		    </el-date-picker>
    	</div>    	
    	<div>
    		<p class="tag">离店日期</p>
    		<el-date-picker	      
		      type="date"
		      class="date"
		      size="small"
		      placeholder="选择日期">
		    </el-date-picker>
    	</div>
    </div>
    <div class="btnWarp">
    	<el-button @click="search" class="search" type="primary">搜索</el-button>
    </div>
  </div>
</template>

<script>
import { formDate } from '@/utils/util'
import FlightCityInput from '@/components/Flight-city'
export default {
  data () {
    return {
      query:{
      	inCity:'北京(BJS)'
      }
    }
  },
  methods:{
  	ex(){
  		
  	},
  	search(){
  		
  	}
  },
  components:{
  	FlightCityInput,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
@import "../../../style/mixin.scss";
#hotel{
	display:flex;
	flex-direction:column;
	height:100%;
	.tag{
		font-size: 12px;
		color:#95a7b3;
		margin-bottom: 8px;
	}
	.cityWarp{
		@include fj();
		.dept,.arr{
			width:205px;
		}	
	}
	.dateWarp{
		margin-top:10px;
		@include fj();
		.date{
			width:205px;
		}
		>div{
			width:205px;
		}
	}
	.btnWarp{
		flex:1;
		display:flex;
		justify-content:flex-end;
		align-items:flex-end;
		.search{
			width:150px;
			height:42px;
			background: $blue;
		}
	}
}
</style>
